import { defineComponent, ref, type PropType } from "vue"
import orderItem from "./index.module.less"

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<Product>,
      required: true
    }
  },

  setup(props) {
    const item = ref(props.item)

    return () => (
      <div class={ orderItem.order_item }>
        <div class={ orderItem.order_item_up }>
          <div class={ orderItem.order_item_up_goods }>
            {
              item.value.goods.map(ite => {
                return (
                  <div class={ orderItem.order_item_up_goods_con }>
                    <div class={ orderItem.order_item_up_goods_img }>
                      <img src={ ite.img } alt="" />
                    </div>
                    <div class={ orderItem.order_item_up_goods_info }>
                      <div class={ orderItem.order_item_up_goods_info_title }>{ ite.name }</div>
                      <div class={ orderItem.order_item_up_goods_info_material }>
                        {
                          ite.arg.map((arg: Arg) => {
                            return <>{ arg.key }:{ arg.value }&nbsp;</>
                          })
                        }
                      </div>
                      <div class={ orderItem.order_item_up_goods_info_num }>数量：{ ite.num }</div>
                    </div>
                  </div>
                )
              })
            }
          </div>
          <div class={ orderItem.order_item_up_price }>{ "￥" + item.value.price.toFixed(2) }</div>
          <div class={ orderItem.order_item_up_operate }>
            <div class={ orderItem.order_item_up_operate_btn }>查看订单</div>
            <div class={ orderItem.order_item_up_operate_btn + " " + ((item.value.status == 2) ? orderItem.operate_btn_actived2 : orderItem.operate_btn_actived1) }>{ item.value.status == 2 ? '取消订单' : '写评价' }</div>
          </div>
        </div>
        <div class={ orderItem.order_item_down }>
          <div class={ orderItem.order_item_down_status + " " + ((item.value.status == 2) ? orderItem.status_is_actived2 : orderItem.status_is_actived1) }>{ item.value.status == 2 ? '配送中' : '已送达' }</div>
          <div class={ orderItem.order_item_down_desc }>{ item.value.text }</div>
        </div>
      </div>
    )
  }
})